<template>
  <view class="join-form pd-v-32">
    
    <u--form
        labelPosition="top"
        :model="form"
        :rules="rules"
        ref="uForm"
        labelWidth="100"
    >
        <u-form-item
            label="姓名"
            prop="name"
            borderBottom
        >
            <u-input
                v-model="form.name"
                border="none"
                clearable
                placeholder="请输入姓名"
            ></u-input>
        </u-form-item>
        <u-form-item
            label="性别"
            prop="sex"
            borderBottom
            @click="showSex = true;"
        >
            <u-input
                v-model="form.sex"
                placeholder="请选择性别"
                readonly
                border="none"
                clearable
            ></u-input>
        </u-form-item>
        
        <u-form-item
            label="手机号"
            prop="phone"
            borderBottom
        >
            <u-input
                v-model="form.phone"
                border="none"
                clearable
                placeholder="请输入手机号"
            ></u-input>
        </u-form-item>
        
        <u-form-item
            label="预算投入"
            prop="budget"
            borderBottom
        >
            <u-input
                v-model="form.budget"
                border="none"
                clearable
                prefixIcon="万元"
                :prefixIconStyle="{fontSize: '28rpx'}"
                placeholder="请输入预算投入"
            >
            </u-input>
        </u-form-item>
        
        <u-form-item
            label="所在地区"
            prop="area"
            borderBottom
        >
            <picker mode="region" @change="regionChange">
                <u-input
                    v-model="form.area"
                    border="none"
                    clearable
                    readonly
                    placeholder="请输入所在地区"
                ></u-input>
            </picker>
        </u-form-item>
        
        <u-form-item
            label="详细地址"
            prop="address"
            borderBottom
        >
            <u-input
                v-model="form.address"
                border="none"
                clearable
                placeholder="请输入详细地址"
            ></u-input>
        </u-form-item>
    </u--form>


    <view class="join-form__footer full-w flex flex-center flex-j-center">
        <u-button type="primary" :customStyle="{width:'600rpx'}" shape="circle" color="#35BE65"  text="确认提交" @click="submit"></u-button>
    </view>
      

    <u-action-sheet
            :show="showSex"
            :actions="actions"
            title="请选择性别"
            @close="showSex = false"
            @select="sexSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script setup>

import { useStore } from '@/store/index.js';
import { applyAdd } from "@/api/index/index.js";

import { computed, ref, onMounted, reactive } from "vue";
import { onReady } from '@dcloudio/uni-app';

const store = useStore();
const uForm = ref(null);
const form = ref({
    name:'',
    sex:'',
    phone:'',
    budget:'',
    area:'',
    address:''
})
const showSex = ref(false);

const actions = ref([{
        name: '男',
    },
    {
        name: '女',
    },
    {
        name: '未知',
    },
])

const rules = ref({
    'name': [{
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change']
    }],
    'sex': [{
        required: true,
        message: '请选择性别',
        trigger: ['blur', 'change']
    }],
    'phone': [{
        trigger: ['blur', 'change'],
        validator: (rule, value,callback) => {
            if (!value) {
                callback('请填写手机号');
                return false;
            }
            if (!/^1[3-9]\d{9}$/.test(value)) {
                callback('请输入正确的手机号');
                return false;
            }
            return true;
        }
    }],
    'budget': [{
        required: true,
        message: '请填写预算投入(万)',
        trigger: ['blur', 'change']
    }],
    'area': [{
        required: true,
        message: '请选择所在地区',
        trigger: ['blur', 'change']
    }],
    'address': [{
        required: true,
        message: '请填写详细地址',
        trigger: ['blur', 'change']
   }],
})

const sexSelect = (e) => {
    form.value.sex = e.name
    uForm.value.validateField('sex')
}

const submit = () => {
    uForm.value.validate().then(valid => {
        if (valid) {
            uni.showLoading({
                title: '提交中...',
                mask: true
            });


            applyAdd({
                name: form.value.name,
                sex: form.value.sex == '男' ? 0 : form.value.sex == '女' ? 1 : form.value.sex == '未知' ? 2 : '',
                phone: form.value.phone,
                budget: form.value.budget,
                area: form.value.area,
                address: form.value.address,
            }).then(res => {
                uni.hideLoading();
                console.log(res,'res')
                if(res.code === 200) {
                    uni.showToast({
                        title: '提交成功',
                        duration: 2000
                    });

                    uForm.value.resetFields()
                    uForm.value.clearValidate()
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000
                    });
                }
            }).catch(err => {
                console.log(err,'eeeeeeeee')
                uni.hideLoading();
                uni.showToast({
                    title: '提交失败',
                    icon: 'none',
                    duration: 2000
                });

            })
            
        }
    }).catch(err => {
        console.log(err)
    })
}

onMounted(() => {
});

onReady(() => {
    uForm.value.setRules(rules.value)
});


const regionChange = (e) => {
    form.value.area = e.detail.value.join(' ')
    uForm.value.validateField('area')
}


</script>

<style lang="scss" scoped>
.join-form {
    .join-form__footer {
        margin-top: 210rpx;
        .btn{
            width: 600rpx;
        }
    }
}
</style>
